<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <!-- 可以让部分国产浏览器默认采用高速模式渲染页面 -->
    <meta name="renderer" content="webkit">
    <!-- 为了让IE浏览器运行最新的渲染模式下 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords"
        content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
    <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
    <link rel="shortcut icon" href="./../favicon.ico">
    <!--    apple-touch-icon:是苹果私有属性
    作用:指定将网页保存到主屏幕上的时候的图标 -->
    <link rel="apple-touch-icon" href="./../apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./../apple-touch-icon114.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./../apple-touch-icon152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./../apple-touch-icon180.png">
    <script>
        let scale = 1.0 / window.devicePixelRatio;
        let text =
            `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`
        document.write(text);
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <link rel="stylesheet" href="./../css/reset.css">
    <link rel="stylesheet" href="./../css/swiper.css">
    <link rel="stylesheet/less" href="./css/index.less">
</head>

<body>
    <!-- 
    1.双飞翼布局
    1.1搞一个容器,在容器中方三个子元素
    1.2在中间的元素中再放一个元素
    1.3设置两边的尺寸,设置中间的宽度等于100%
    1.4设置中间元素里面的盒子的margin为两边的宽度
    1.5让三个盒子往统一方向浮动
    
 -->
    <!-- 头部 Start -->
    <div class="header">
        <div class="header-in">
            <img src="images/search-it666-back.png" class="go-back">
            <div class="search-box">
                <img src="images/topbar-it666-search.png" alt="">
                <input type="text">
                <img src="images/search-it666-close.png" class="go-back">
            </div>
        </div>
    </div>
    <!-- 头部 End -->
    <div class="nav">
        <ul>
            <li>综合</li>
            <li>单曲</li>
            <li>歌单</li>
            <li>视频</li>
            <li>歌手</li>
            <li>博客</li>
            <li>歌词</li>
            <li>专辑</li>
            <li>电台</li>
            <li>云圈</li>
            <li>用户</li>
            <span class="current"></span>
        </ul>
    </div>
    <!-- 内容 Start -->
    <div class="main">
        <div class="main-in">
            <div class="composite active">

            </div>
            <div class="song">
                <div class="top">
                    <div class="top-left">
                        <p class="check-all">
                            <i></i>
                            <span>全选</span>
                        </p>
                        <p class="play-all">
                            <img src="images/detail-it666-play.png" alt="">
                            <span>播放全部</span>
                        </p>
                    </div>
                    <div class="top-right">
                        <p class="multiple-select">
                            <img src="images/detail-it666-menu.png" alt="">
                            <span>多选</span>
                        </p>
                        <span class="complete-select">完成</span>
                    </div>
                </div>
                <ul class="list"></ul>
            </div>
            <div class="playList">
                <ul class="list">

                </ul>
            </div>
            <div class="video">
                <ul class="list">

                </ul>
            </div>
            <div class="artist">
                <ul class="list">

                </ul>
            </div>
            <div class="blog">
                <ul class="list">
                    无结果
                </ul>
            </div>
            <div class="textsong">
                <ul class="list">
                    无结果
                </ul>
            </div>
            <div class="album">
                <ul class="list">
                    <li>

                    </li>
                </ul>
            </div>
            <div>电台</div>
            <div>云圈</div>
            <div class="user">
                <ul class="list"></ul>
            </div>
            <!-- 上拉加载 start -->
            <div class="pull-up">
                <p>
                    <img src="./../images/pull-up.gif" alt="">
                    <span>加载中</span>
                </p>
            </div>
            <!-- 上拉加载 end -->
        </div>
    </div>
    <!-- 内容 End -->
    <!-- 底部start -->
    <div class="footer"></div>
    <!-- 底部end -->

    <script id="songItems" type="text/html">
        <% for(let i = 0; i < songs.length; i++){%>
        <li data-music-id="<%=songs[i].id%>">
            <div class="bottom-left">
                <i></i>
                <div>
                    <span class="song-name"><%=songs[i].name%></span>
                    <p>
                        <img src="images/sq.png" alt="">
                        <span class="song-singer"><%=songs[i].artists[0].name%></span>
                        -
                        <span><%=songs[i].album.name%></span>
                    </p>
                </div>
            </div>
            <div class="bottom-right">
                <% if (songs[i].mvid !== 0) {%>
                <img src="images/detail-it666-video.png" alt="">
                <% } %>
                <img src="images/detail-it666-more.png" alt="">
            </div>
        </li>
        <%}%>
    </script>

    <script id="playListItems" type="text/html">
        <% for(let i = 0; i < playlists.length; i++){%>
        <li>
            <div class="playList-left">
                <img src="<%=playlists[i].coverImgUrl%>" alt="">
            </div>
            <div class="playList-right">
                <p class="playList-title"><%=playlists[i].name%></p>
                <p class="playList-init"><%=playlists[i].trackCount%>首音乐 by
                    <%=playlists[i].creator.nickname%>，播放<%=playlists[i].playCount%>次</p>
            </div>
        </li>
        <%}%>
    </script>

    <script id="videoItems" type="text/html">
        <% for(let i = 0; i < videos.length; i++){%>
        <li>
            <div class="video-left">
                <img src="<%=videos[i].coverUrl%>" alt="">
                <span><%=videos[i].time%></span>
            </div>
            <div class="video-right">
                <p class="video-title"><%=videos[i].title%></p>
                <div>
                    <span><%=videos[i].creator[0].userName%></span>
                    <span><%=videos[i].playCount%>播放</span>
                </div>
            </div>
        </li>
        <%}%>
    </script>

    <script id="artistItems" type="text/html">
        <% for(let i = 0; i < artists.length; i++){%>
        <li>
            <div class="artist-left">
                <div>
                    <img src="<%=artists[i].picUrl%>" alt="">
                    <%if(artists[i].identityIconUrl){%>
                    <img src="<%=artists[i].identityIconUrl%>" alt="">
                    <%}%>
                </div>
                <span><%=artists[i].name%></span>
                </div>
                <div class="artist-right">
                    <p class="follow">
                        + 关注
                    </p>
                    <p class="remove">
                        ✔ 关注
                    </p>
                </div>
        </li>
        <%}%>
    </script>

    <script id="albumItems" type="text/html">
        <% for(let i = 0; i < albums.length; i++){%>
        <li>
            <div class="album-left">
                <img src="<%=albums[i].picUrl%>" alt="">
            </div>
            <div class="album-right">
                <p class="album-title"><%=albums[i].name%></p>
                <p class="album-init"><%=albums[i].artist.name%> <%=albums[i].time%></p>
            </div>
        </li>
        <%}%>
    </script>

    <script id="userItems" type="text/html">
        <% for(let i = 0; i < userprofiles.length; i++){%>
        <li>
            <div class="user-left">
                <div>
                    <img src="<%=userprofiles[i].avatarUrl%>" alt="">
                    <%if(userprofiles[i].identityIconUrl){%>
                    <img src="<%=userprofiles[i].identityIconUrl%>" alt="">
                    <%}%>
                </div>
                <p>
                    <span><%=userprofiles[i].nickname%></span>
                    <%if(userprofiles[i].authStatus) {%>
                    <span>网易音乐人</span>
                    <%}%>
                </p>
                </div>
                <div class="user-right">
                    <p class="follow">
                        + 关注
                    </p>
                    <p class="remove">
                        ✔ 关注
                    </p>
                </div>
        </li>
        <%}%>
    </script>

    <script id="sim_queryItems" type="text/html">
        <% for(let i = 0; i < sim_querys.length; i++){%>
        <li><%=sim_querys[i].keyword%></li>
        <%}%>
    </script>

    <script id="compositeItems" type="text/html">
        <% for(let i = 0; i < order.length; i++){%>
        <div class="composite-category <%=order[i]%>">
            <div class="composite-top">
                <%if(order[i] === "song") {%>
                <h6>单曲</h6>
                <span>播放</span>
                <%} else if(order[i] === "playList") {%>
                <h6>歌单</h6>
                <%} else if(order[i] === "new_mlog") {%>
                <h6>视频</h6>
                <%} else if(order[i] === "artist") {%>
                <h6>歌手</h6>
                <%} else if(order[i] === "album") {%>
                <h6>专辑</h6>
                <%} else if(order[i] === "sim_query") {%>
                <h6>相关搜索</h6>
                <%}else if(order[i] === "circle") {%>
                <h6>云圈</h6>
                <%}else {%>
                <h6>用户</h6>
                <%}%>
                
            </div>
            
            <ul class="composite-middle list">
            </ul>
            
                <%if($data[order[i]]["more"]){%>
                <div class="composite-bottom">
                    <p>
                        <%=$data[order[i]]["moreText"]%> &gt
                    </p>
                </div>
                <%}%>
            
        </div>
        <%}%>
    </script>

    <script src="./../js/less.js"></script>
    <script src="./../js/zepto.js"></script>
    <script src="./../js/fx.js"></script>
    <script src="./../js/fx_methods.js"></script>
    <script src="./../js/iscroll-probe.js"></script>
    <script src="./../js/swiper.js"></script>
    <script src="./../js/axios.js"></script>
    <script src="./../js/api.js"></script>
    <script src="./../js/template-web.js"></script>
    <script src="./../js/clamp.js"></script>
    <script src="./../js/tools.js"></script>
    <script src="js/index.js"></script>

</body>

</html>